<template>
    <el-form
        ref="formRef"
        :model="formData"
        label-width="100px"
        :size="'default'"
        status-icon
        :inline="true"
        class="demo-form-inline"
    >
        <el-form-item label="站点" prop="cfs_cod">
            <el-select
                v-model="formData.cfs_cod"
                :clearable="true"
                filterable
                placeholder="Select"
                width="200px"
            >
                <el-option
                    v-for="optValue in cyCfs"
                    :key="optValue.value"
                    :label="optValue.label"
                    :value="optValue.value"
                />
            </el-select>
        </el-form-item>
        <el-form-item style="padding-top: 8px;">
            <el-upload
                ref="uploadRef"
                action="/upload/inventorycheck"
                :data="{ cfs_cod: `${formData.cfs_cod}` }"
                :auto-upload="true"
                accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                :limit="1"
                v-loading="loading"
                :before-upload="beforeAvatarUpload"
                :on-exceed="handleExceed"
                :on-success="handleSuccess"
            >
                <template #trigger>
                    <el-button type="primary">比对盘存文件</el-button>
                </template>
            </el-upload>
        </el-form-item>
            
        
    </el-form>
    <el-table
        ref="tableRef"
        :data="tableData"
        v-bind="tableDefaultAttribute"
        row-key="cntr"
        :max-height="tableHeight"
        table-layout="auto"
        
    >
        <template #empty>
            <span>无数据</span>
        </template>
        <el-table-column type="index" width="55" :align="'center'" />
        <template v-for="col in tableColumns" :key="col.prop">
            <el-table-column
                v-if="!col.isHidden"
                :align="col.align"
                :prop="col.prop"
                :label="col.label"
                :fixed="col.fixed"
                :formatter="col.formatter"
                :type="col.type"
                :width="col.width"
                sortable
            >
                
            </el-table-column>
        </template>
    </el-table>
</template>
<script setup lang="ts" name="InventoryCheck">
import { ref, reactive, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useAppStore } from '@/store/app';
import {
    ElMessageBox,
    genFileId,
    TableInstance,
    UploadInstance,
    UploadProps,
    UploadRawFile,
} from 'element-plus';
import {
    tableDefaultAttribute,
    tableColumnDefault,
} from '@/hooks/useTable';
import { tableMaxHeightAdjust } from '@/common/const';
import { TableColumn } from '@/common/types/app';
import { isNil } from 'lodash';
type checkresult = {
    cntr: string,
    detail: string,
}
const tableRef = ref<TableInstance>();
const tableHeight = ref(100);
const tableData = ref<Array<checkresult>>([]);

const formData = reactive<{ cfs_cod?: string }>({});
const { cyCfs } = storeToRefs(useAppStore());
const uploadRef = ref<UploadInstance>();
const loading = ref(false);

const tableColumns = reactive<TableColumn[]>([
    {
        ...tableColumnDefault,
        order: 1,
        prop: 'cntr',
        label: '箱号',
        sortable: 'true',
        width: 200,
    },
    {
        ...tableColumnDefault,
        order: 2,
        prop: 'detail',
        label: '比较明细',
        sortable: 'true',
        // width: 500,
    }
]);
onMounted(() => {
    tableHeight.value =
        window.innerHeight -
        Math.ceil(tableRef.value?.$el.getBoundingClientRect().bottom) +
        tableMaxHeightAdjust;
    // alert(tableHeight.value);
});
const beforeAvatarUpload = (rawFile: UploadRawFile) => {
    return new Promise<boolean>((resolve, reject) => {
        if (isNil(formData.cfs_cod)) {
            ElMessageBox.alert('请选择站点', '错误', {
                confirmButtonText: '确定',
                type: 'error',
            });
            return reject(false);
        }
        var reader = new FileReader();
        reader.readAsDataURL(rawFile);
        if (
            rawFile.type !== 'application/vnd.ms-excel' &&
            rawFile.type !==
                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        ) {
            ElMessageBox.alert('只能上传excel文件', '错误', {
                confirmButtonText: '确定',
                type: 'error',
            });
            loading.value = false;
            return reject(false);
        } else if (rawFile.size / 1024 / 1024 > 2) {
            ElMessageBox.alert('文件大小不能超过2M!', '错误', {
                confirmButtonText: '确定',
                type: 'error',
            });
            loading.value = false;
            return reject(false);
        }
        return resolve(true);
    });
};
const handleExceed: UploadProps['onExceed'] = (files) => {
    uploadRef.value!.clearFiles();
    const file = files[0] as UploadRawFile;
    file.uid = genFileId();
    uploadRef.value!.handleStart(file);
};

const handleSuccess = (response: any) => {
    console.log(response);
    tableData.value.length = 0
    if (response.code > 0) {
        uploadRef.value!.clearFiles();
        /* ElMessageBox.alert(response.msg, '消息', {
            confirmButtonText: '确定',
            type: 'success',
        }); */
        tableData.value = response.obj;
    } else {
        ElMessageBox.alert(response.msg, '错误', {
            confirmButtonText: '确定',
            type: 'error',
        });
    }
    loading.value = false;
};
</script>
<style lang="scss" scoped>
.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>
